<template>
  <div class="integerl">
    <div class="header">
      <van-nav-bar
        title="确定兑换"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="integerl-wranp">
      <div class="address" @click="goToChoseAddress()">
        <div class="name-phone">
          <span>收货人：{{addressInfo.accept_name}}</span>
          <span>{{addressInfo.telphone}}</span>
        </div>
        <div class="address-info">
          <div>收货地址：{{addressInfo.chinese.province}} {{addressInfo.chinese.city}} {{addressInfo.chinese.area}}
            {{addressInfo.address}}</div>
          <div><van-icon name="arrow" /></div>
        </div>
      </div>
      <div class="border"></div>
      <div class="can-use-integral">可用积分：<span>{{10000}}</span></div>
      <div class="goods">
        <div class="goods-img">
          <img src="../../assets/tgsp.png" alt="">
        </div>
        <div class="goods-info">
          <div class="goods-name">iqos配件烟灰缸车载烟头罐日本 电子烟三代2.4plus</div>
          <div class="goods-spec">
            <div>
              <div>黑色(现货)；L</div>
              <div><van-icon name="arrow-down" /></div>
            </div>
          </div>
          <div class="goods-price">
            <div class="goods-price-l">
              <div><span>2000</span>积分</div>
              <div>2500积分</div>
            </div>
            <div class="goods-count">
              x{{1}}
            </div>
          </div>
        </div>
      </div>
      <div class="vip">
        <div>会员折扣价：{{1800}}积分</div>
        <div>会员折扣详情</div>
      </div>
    </div>
    <div class="pay">
      <div class="pay-l">实付金额：{{1800}}积分</div>
      <div class="pay-r">确认兑换</div>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request.js'
import { Notify } from 'vant';
import { Popup } from 'vant';

export default {
  data() {
    return {
      addressInfo: {},

    };
  },

  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    goToChoseAddress(){
      this.$router.push({
        name: 'choseAddress'
      })
    },
    getAddressInfo(){
      // 从选择地址重回来判断缓存中是否有地址
      let addressInfo = JSON.parse(localStorage.getItem('localStorageAddress'))
      if(!addressInfo){
        // 请求地址
      request({
        url: `?controller=theapi&action=address_list`,
        method: 'get'
      }).then(res=>{
        this.addressInfo = res.data[0]
      })
      }else{
        // 从缓存中设置地址，保存格式
        let chinese = {
          area: addressInfo.area_val,
          city: addressInfo.city_val,
          province: addressInfo.province_val,
        }
        let addressObj = {
          accept_name: addressInfo.name,
          address: addressInfo.addressM,
          telphone: addressInfo.tel,
          zip: addressInfo.zip,
          id: addressInfo.id,
          chinese: chinese
        }
        this.addressInfo = addressObj
        localStorage.removeItem('localStorageAddress')
      }
    }
  },
  created(){
    // 获取地址信息
    this.getAddressInfo()

  }
};
</script>

<style lang="scss" scoped>
.van-nav-bar .van-icon, .van-nav-bar__title{
  color: #191E2A;
}
.van-nav-bar__text{
  color: #191E2A;
}
.integerl{
  position: absolute;
  width: 100%;
  min-height: 100%;
  background: #F5F6F7;
  > .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
}
.integerl-wranp{
  position: relative;
  margin: 1.1rem 0 0 0;
  color: #191E2A;
  background: #fff;
  z-index: 1;
  > .address{
    padding: 0.3rem 0.3rem 0.35rem 0.3rem;
    font-size: 0.3rem;
    > .name-phone{
      display: flex;
      justify-content: space-between;
      align-items: center;
      > span:first-of-type{
        font-size: 0.32rem;
      }
    }
    > .address-info{
      margin: 0.3rem 0 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > div:last-of-type{
        margin: 0 0 0 0.3rem;
        width: 0.2rem;
      }
    }
  }
  > .border{
    width: 100%;
    height: 0.12rem;
    background: url(../../assets/addressborder.png) no-repeat center;
    background-size: 100%;
  }
  > .can-use-integral{
    display: flex;
    margin: 0.1rem 0 0 0.3rem;
    padding: 0.3rem 0;
    font-size: 0.3rem;
    font-weight: 600;
    border-bottom: 0.01rem solid #EFF1F3;
    > span{
      color: #F52E67;
    }
  }
  .goods{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem;
    > .goods-img{
      border: 1px solid #EFF1F3;
      width: 2.28rem;
      height: 2.28rem;
      overflow: hidden;
      flex: none;
      > img{
        width: 100%;
        height: 100%;
      }
    }
    > .goods-info{
      position: relative;
      margin: 0 0 0 0.3rem;
      height: 2.28rem;
      flex-grow: 1;
      > .goods-name{
        font-size: 0.3rem;
        font-weight: 600;
      }
      > .goods-spec{
        margin: 0.3rem 0 0 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.21rem;
        color: #C1C3C6;
        > div:first-of-type{
          display: flex;
          align-items: center;
          font-size: 0.12rem;
          padding: 0.01rem 0.04rem;
          background: #F5F5F6;
          border-radius: 0.04rem;
          > div:last-of-type{
            margin: 0 0 0 0.2rem;
          }
        }
      }
      .goods-price{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        bottom: 0;
        left: 0;
        > .goods-price-l{
          display: flex;
          align-items: flex-end;
          > div span{
            color: #F52E67;
            font-size: 0.32rem;
            margin: 0 0.06rem 0 0;
          }
          > div:last-of-type{
            margin: 0 0 0 0.2rem;
            text-decoration-line: line-through;
          }
        }
      }
    }
  }
  .vip{
    padding: 0.3rem 0.3rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.26rem;
    > div:last-of-type{
      color: #F52E67;
    }
  }
}
.pay{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1rem;
  left: 0;
  bottom: 0;
  font-size: 0.3rem;
  > .pay-l{
    width: 70%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background: #22262F;
    color: #FFFFFF;
  }
  > .pay-r{
    width: 30%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background: #F52E67;
    color: #FFFFFF;
  }
}

</style>
